<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Joker X
  Date: 2022/3/20
  Time: 10:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="../common/BootStrapCDN.jsp"></jsp:include>
    <title>书籍列表</title>
    <script>
        $(document).on("click","#deleteBtn",function(){
            // 获取删除当前图书的名称
            var bookName = $(this).parent().parent().parent().find("td:first").next().text();
            return confirm("你确定图书【" + bookName + "】要删除吗")
        });
    </script>
</head>
<body>

<div class="container">
    <div class="row-fluid">
        <div class="page-header">
            <h1>书籍列表<small> ————————————————————————————————— Created By Joker</small></h1>
        </div>
        <a href="${pageContext.request.contextPath}/book/toAddBookPage"><p class="btn btn-success">添加图书</p></a>
        <a href="${pageContext.request.contextPath}/book/getAll"><p class="btn btn-info">显示所有图书</p></a>
        <form action="${pageContext.request.contextPath}/book/getAll" method="get" class="form-inline" style="float: right">
            <span class="label label-warning" style="display: inline-block;">${errorMsg}</span>
            <input type="text" name="message" class="form-control" placeholder="查询你想要的书籍吧">
            <input type="submit" class="btn btn-primary" value="查询图书"/>
        </form>
    </div>
    <!-- 管理图书列表 -->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>图书名称</th>
                        <th>图书数量</th>
                        <th>详情</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <c:forEach items="${pageInfo.list}" var="book">
                        <tr>
                            <td>${book.bookID}</td>
                            <td>${book.bookName}</td>
                            <td>${book.bookCounts}</td>
                            <td>${book.detail}</td>
                            <td>
                                <a href="${pageContext.request.contextPath}/book/deleteBook/${book.bookID}" style="color: white"><button id="deleteBtn" class="btn btn-danger glyphicon glyphicon-trash">删除</button></a>

                                <a href="${pageContext.request.contextPath}/book/toUpdatePage/${book.bookID}" style="color: white"><button class="btn btn-info glyphicon glyphicon-pencil">修改</button></a>
                            </td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
    <%--  显示分页信息  --%>
    <div class="row">
        <!-- 分页的文字信息 -->
        <div class="col-md-4">
            当前第${pageInfo.pageNum}页,总${pageInfo.pages}页,总${pageInfo.total}条数据
        </div>
        <!-- 分页条信息 -->
        <div class="col-md-8">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li><a href="${pageContext.request.contextPath}/book/getAll?message=${message}&pageNumber=1">首页</a></li>
                    <!-- 当前页为1时，禁用前一页按钮 -->
                    <c:if test="${pageInfo.pageNum == 1}">
                        <li class="disabled">
                            <a href="javaScript:;" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    </c:if>
                    <!-- 有上一页时，才能使用前一页按钮 -->
                    <c:if test="${pageInfo.hasPreviousPage}">
                        <li>
                            <a href="${pageContext.request.contextPath}/book/getAll?message=${message}&pageNumber=${pageInfo.pageNum - 1}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    </c:if>
                    <!-- 遍历当前连续页的按钮 -->
                    <c:forEach items="${pageInfo.navigatepageNums}" var="page_num">
                        <c:if test="${page_num == pageInfo.pageNum}">
                            <li class="active"><a href="#">${page_num}</a></li>
                        </c:if>
                        <c:if test="${page_num != pageInfo.pageNum}">
                            <li><a href="${pageContext.request.contextPath}/book/getAll?message=${message}&pageNumber=${page_num}">${page_num}</a></li>
                        </c:if>
                    </c:forEach>
                    <!-- 当前页为最后一页时，禁用下一页按钮 -->
                    <c:if test="${pageInfo.pageNum == pageInfo.pages}">
                        <li class="disabled">
                            <a href="javaScript:;" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </c:if>
                    <c:if test="${pageInfo.hasNextPage}">
                        <li>
                            <a href="${pageContext.request.contextPath}/book/getAll?message=${message}&pageNumber=${pageInfo.pageNum + 1}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </c:if>
                    <li><a href="${pageContext.request.contextPath}/book/getAll?message=${message}&pageNumber=${pageInfo.pages}">末页</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>
